import React, { useEffect, useRef, useState } from 'react';
import { Tag, Card, Space } from 'antd';
import { connect } from 'umi';
import Categories from './components/Categories';
import { categoryType_status } from '@/common/contact';
import Table from './components/Table';
import './index.less';
const Manage = (props) => {
  const { dispatch } = props;
  const tabList = (() => {
    return Object.keys(categoryType_status).map((item) => {
      return {
        tab: categoryType_status[item],
        key: item,
      };
    });
  })();
  const [activeTabKey, setActiveTabKey] = useState(tabList[0].key);
  const [categoryList, setCategoryList] = useState([]);
  const [selectedKeys, setSelectedKeys] = useState(['']);
  useEffect(() => {
    fetchData();
  }, [activeTabKey]);
  const onTabChange = (key) => {
    setActiveTabKey(() => {
      setSelectedKeys(['']);
      return key;
    });
  };
  const fetchData = () => {
    dispatch({
      type: 'liveStreaming/fetchListMaterialCategory',
      payload: {
        categoryType: activeTabKey,
      },
      callback: (e) => {
        setCategoryList(e);
      },
    });
  };
 
  const tableRef = useRef();
  const handleCallback = () => {
    tableRef.current.fetchGetData();
  };
  return (
    <Card tabList={tabList} activeTabKey={activeTabKey} onTabChange={onTabChange} title="素材中心">
      <Space align={'start'} style={{ width: '100%' }}>
        <Categories
          handleCallback={handleCallback}
          selectedKeys={selectedKeys}
          activeTabKey={activeTabKey}
          reload={fetchData}
          setSelectedKeys={setSelectedKeys}
          list={[
            {
              categoryName: `全部${categoryType_status[activeTabKey]}`,
              id: '',
              subMaterialCategoryList: categoryList,
            },
          ]}
        ></Categories>
        <Table
          childRef={tableRef}
          categoryList={categoryList}
          activeTabKey={activeTabKey}
          selectedKeys={selectedKeys}
        ></Table>
      </Space>
    </Card>
  );
};
export default connect(({ loading, liveStreaming }) => ({
  list: liveStreaming.materialList,
  loading: loading.models.liveStreaming,
}))(Manage);
